<template>
  <!-- 内容展示区 -->
  <div class="main" :class="{ fold: HomeSettingStore.fold ? true : false }">
    <router-view v-slot="{ Component }">
      <!-- 过渡动画 -->
      <transition name="fade">
        <!-- 渲染home一级路由的子路由 -->
        <component :is="Component" v-if="flag" />
      </transition>
    </router-view>
  </div>
</template>

<script lang="ts" setup name="Main">
import useHomeSettingStore from '@/store/setting'
import { watch, ref, nextTick } from 'vue'
let HomeSettingStore = useHomeSettingStore()
//控制当前组件是否销毁重建
let flag = ref(true)
//监听仓库内部是否发生变化，如果发生变化，说明用户点击过刷新按钮
watch(
  () => HomeSettingStore.Refresh,
  () => {
    //点击刷新按钮：路由组件销毁
    flag.value = false
    //  更新DOM之后调用此函数重新获取DOM
    nextTick(() => {
      flag.value = true
    })
  },
)
</script>

<style>
.fade-enter-from {
  /* 透明度 */
  opacity: 0;
  transform: scale(0);
}
.fade-enter-active {
  transition: all 1s;
}
.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
</style>
